<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <!-- 快捷导航 -->
<div class="shortcut">
    <div class="wrapper">
       <div class="lift">
        <ul>
            <li><a href="#">华为官网  |</a></li>
            <li><a href="#">荣耀官网  |</a></li>
            <li><a href="#">软件应用  |</a></li>
            <li><a href="#">花粉俱乐部  |</a></li>
            <li><a href="#">Select Region</a></li>
            <li class="right"><a href="#">登录 注册</a></li>
            <li><a href="#">|  我的订单</a></li>
            <li><a href="#">|  V码(优购码)</a></li>
            <li><a href="#">|  手机版</a></li>
            <li class="dw"><a href="#">
                <span>|  网站导航</span>
                <span class="img"></span>
            </a></li>
        </ul>
        </div>
    </div>
</div>
<!-- 头部logo区域 -->
  <div class="logo wrapper">
<div class="lift">
    <img src="./images/logo.huawei.png" alt="">
    <div class="butt">
       <p>商城首页</p> 
    </div>
</div>
<div class="right">
    <img src="./images/qrcode_vmall_app01.png" alt="">
    <p>微信扫码关注我们</p>
</div>
  </div>
  <!-- banner -->
<div class="banner">
    <!-- 导航 -->
    <div class="nev">
        <div class="wrapper">
        <ul>
            <li><a href="#">华为专区</a></li>
            <li><a href="#">HUAWEI P10</a></li>
            <li><a href="#">HUAWEI Mate9</a></li>
            <li><a href="#">HUAWEI Nova</a></li>
            <li><a href="#">华为畅享6S</a></li>
            <li><a href="#">荣耀专区</a></li>
        </ul>
        </div>
     
    </div>
    <div class="black wrapper">
        <div class="lift">
            <ul>
                <li><a href="#">全部商品</a></li>
                <li>
                    <a href="#"><p>手机</p></a>
                    <a href="#"><p class="lat">HUAWEI Mate系列</p></a>
                </li>
                <li>
                    <a href="#"><p>平板&穿戴</p></a>
                    <a href="#"><p class="lat">平板电脑 手环/手表</p></a>
                </li>
                <li>
                   <a href="#"><p>笔记本电脑</p></a> 
                   <a href="#"> <p class="lat"></p></a>
                </li>
                <li>
                    <a href="#"><p>智能家居</p></a>
                    <a href="#"><p class="lat">字母路由 电力猫 路由器</p></a>
                </li>
                <li>
                    <a href="#"><p>专属配件</p></a>
                    <a href="#"><p class="lat">贴膜 保护壳 保护套</p></a>
                </li>
                <li>
                    <a href="#"><p>通用配件</p></a>
                    <a href="#"><p class="lat">耳机 音箱</p></a>
                </li>
                <li></li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 商品展示 -->
<div class="dh wrapper">
    <ul>
        <li><a href="#"><img src="./images/2017031017165551.jpg" alt=""></a></li>
        <li><a href="#"><img src="./images/20170313143419135.jpg" alt=""></a></li>
        <li><a href="#"><img src="./images/20170310090516264.jpg" alt=""></a></li>
        <li><a href="#"><img src="./images/20170310105644358.jpg" alt=""></a></li>
    </ul>
</div>
<div class="dh2 wrapper">
   <ul>
    <li>
        <div>
            <p class="title">HUAWEI P10</p>
            <p class="title">Plus</p>
            <p>金属钻雕工艺</p>
            <span>￥4398</span>
        </div>
        <img src="./images/1484219138436.png" alt="">
    </li>
    <li>
        <div>
            <p class="title">HUAWEI P10</p>
            <p class="title">Plus</p>
            <p>金属钻雕工艺</p>
            <span>￥4398</span>
        </div>
        <img src="./images/1489161234073.png" alt="">
    </li>
    <li>
        <div>
            <p class="title">HUAWEI P10</p>
            <p class="title">Plus</p>
            <p>金属钻雕工艺</p>
            <span>￥4398</span>
        </div>
        <img src="./images/1491476650727.png" alt="">
    </li>
   </ul>
</div>
<!-- 底部导航 -->
 <footer class="wrapper">
    <div class="service">
        <ul>
            <li>
                <h5></h5>
                <p>500强企业 品质保证</p>
            </li>
            <li>
                <h5></h5>
                <p>7天退回 15天换新</p>
            </li>
            <li>
                <h5></h5>
                <p>99元起免运费</p>
            </li>
            <li>
                <h5></h5>
                <p>445家维修网点 全国联保</p>
            </li>
        </ul>
    </div>
    <div class="wz">
        <ul>
            <li>
                <div>
                  <div class="cc">
                    <h5></h5>
                <h4>帮助中心</h4>
            </div>
                  <p>购物指南</p>
                  <p>配送方式</p>
                  <p>支付方式</p>
                  <p>常见问题</p>
                </div>
              </li>
              <li>
                <div>
                  <div class="ccs">
                    <h5></h5>
                <h4>售后服务</h4>
                </div>
                  <p>保修政策</p>
                  <p>退换货政策</p>
                  <p>退换货流程</p>
                  <p>保修状态查询</p>
                </div>
              </li>
              <li>
                <div>
                  <div class="ccd">
                    <h5></h5>
                <h4>技术支持</h4>
                </div>
                  <p>售后网点</p>
                  <p>荣耀零售店铺</p>
                  <p>预约维修</p>
                  <p>手机寄修服务</p>
                  <p>维修配件价格查询</p>
                  <p>软件下载</p>
                </div>
              </li>
              <li>
                <div>
                  <div  class="ccf">
                    <h5></h5>
                <h4>关于商城</h4>
                </div>
                  <p>公司介绍</p>
                  <p>华为商城简介</p>
                  <p>联系客服</p>
                </div>
              </li>
              <li>
                <div>
                  <div class="ccg">
                    <h5></h5>
                <h4>关注我们</h4>
                </div>
                  <p>新浪微博</p>
                  <p>腾讯微博</p>
                  <p>花粉俱乐部</p>
                  <p>商城手机版</p>
                </div>
              </li>
        </ul>
      </div>
      <div class="textbutton">
        <p>友情链接： | 华为官网 | 华为消费者业务 | 荣耀官网 | 花粉俱乐部 | 莫塞尔商城 | 爱旅官网 | 华为应用市场 | 万表网 | 中商情报网 | 刷机精灵 | 华为手机 | 优购物官网 | 智能电视 | UC浏览器 |</p>
      <p>中关村商城 | 酷狗音乐 | 华为商城手机版 | 百信手机网 | 卡宝宝网 | 多特软件下载 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 | 拍鞋网商城 | 欧宝丽珠宝 | 寻购网 | 亿智蘑菇 | 安卓市场 |</p>
      <span>阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 | 电子产品世界 | 历趣网 | 网购返利 | Apple110 | 91手机门户网 | 移动叔叔 | 奥特莱斯 | 荣耀Magic | 携程租车 | </span>
      <span> 申请链接 >></span>
      <p>隐私政策 服务协议 Copyright ? 2012-2017 VMALL.COM 版权所有 保留一切权利</p>
      <div class="dsss">
        <img src="./images/20160226162651249.png" alt="">
        <p>公安备案 苏公网安备 32011402010009号 | 苏ICP备09062682号-9 | 增值电信业务经营许可证：苏B2-20130048 | 网络文化经营许可证：苏网文[2015] 1599-026号</p>
      </div>
    </div>
    <div class="images">
        <img src="./images/20160226162415360.png" alt="">
        <img src="./images/20160226162521265.png" alt="">
        <img src="./images/20160226162531395.png" alt="">
        <img src="./images/20161224180914742.jpg" alt="">
    </div>
 </footer>
 <div class="sasd">

 </div>
</body>
</html>